/*
 * @File: index.tsx
 * @desc: 节点配置差异化演示
 * @author: heqinghua
 * @date: 2025年08月12日 10:03:04
 * @example: 调用示例
 */

import React, { useState, useEffect } from "react";
import DynamicConfigForm from "./widget/index";
import type { Field } from "./widget/type.d";
import { getNodeSchemas, getNodeTypes, getInjector } from "./plugin/injector";
import { Card, Select, Divider, Typography, Space, Button } from "antd";
import { initInjectDynamicNode } from "./example";

// 自动注册
// initInjectDynamicNode();


const NodeConfigDemo: React.FC = () => {
  const [selectedNodeType, setSelectedNodeType] = useState<string>();
  const [nodeConfig, setNodeConfig] = useState<Record<string, any>>({});
  const [nodeSchemas, setNodeSchemas] =
    useState<Record<string, any>>(getNodeSchemas());
  const [nodeTypes, setNodeTypes] =
    useState<{ value: string; label: string }[]>(getNodeTypes());

  // 监听节点元数据和类型变化
  useEffect(() => {
    const updateData = () => {
      setNodeSchemas(getNodeSchemas());
      setNodeTypes(getNodeTypes());
    };

    // 初始化数据
    updateData();

    // 使用订阅机制监听变化
    const unsubscribe = getInjector().subscribe(updateData);
    return () => unsubscribe();
  }, []);
  

  const currentSchema =
    nodeSchemas[selectedNodeType as keyof typeof nodeSchemas];

  // 当节点类型改变时重置配置
  useEffect(() => {
    // 初始化默认值
    const initialConfig: Record<string, any> = {};
    if (currentSchema && currentSchema.config) {
      currentSchema.config.forEach((field: Field) => {
        if (field.defaultValue !== undefined) {
          initialConfig[field.field] = field.defaultValue;
        }
      });
    }
    setNodeConfig(initialConfig);
  }, [selectedNodeType, currentSchema]);

  return (
    <div
      className="demo-container"
      style={{ padding: "24px", maxWidth: "1200px", margin: "0 auto" }}
    >
      <Typography.Title level={2}>节点配置差异化演示</Typography.Title>
      <Button type="primary" onClick={initInjectDynamicNode}>动态节点注入</Button>
      <Divider />
      <Card title="节点类型选择" style={{ marginBottom: "24px" }}>
        <Space direction="vertical" size="middle">
            <Select
              value={selectedNodeType}
              placeholder="请选择节点类型"
              onChange={(value) => setSelectedNodeType(value)}
              style={{ width: 240 }}
              allowClear
            >
              {nodeTypes.map((type) => (
                <Select.Option key={type.value} value={type.value}>
                  {type.label}
                </Select.Option>
              ))}
            </Select>
        </Space>
      </Card>

      {currentSchema && (
        <>
          <Card
            title={`${currentSchema?.label || "节点"}配置`}
            style={{ marginBottom: "24px" }}
          >
            {currentSchema && (
              <DynamicConfigForm
                schema={currentSchema}
                value={nodeConfig}
                onChange={setNodeConfig}
              />
            )}
          </Card>

          <Card title="当前配置数据">
            <pre
              style={{
                backgroundColor: "#f5f5f5",
                padding: "16px",
                borderRadius: "4px",
                overflowX: "auto",
              }}
            >
              {JSON.stringify(nodeConfig, null, 2)}
            </pre>
          </Card>
        </>
      )}
    </div>
  );
};

export default NodeConfigDemo;
